<template>
    <div class="menu xiaozhucaishui-menu">
        <div class="con">
            <!-- <div
                class="logtext"
                :style="{
                    color: ifMenuHight ? nav_color : '#333333',
                }"
                @click="goIndex"
            >
                小竹财税<span
                    :style="{
                        color: ifMenuHight ? logo_color : '#666666',
                    }"
                    >&nbsp;让天下没有难懂的财税</span
                >
            </div> -->
            <template
                v-if="(!$route.name.includes('service') && !($route.path == '/user/mydemand' || $route.path == '/user/mydemandorder'))">
                <img src="~/assets/images/logo-xzkj-text.png" class="log" alt="小竹财税">
                <el-menu :default-active="menuIndex" background-color="transparent" class="el-menu-demo"
                    active-text-color="#1C87F3" text-color="#333333" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="0">
                        <nuxt-link to="/"> 首页 </nuxt-link>
                    </el-menu-item>
                    <el-menu-item index="10" class="hot-class">
                        <nuxt-link to="/chatgpt/xzcsgpt" target="_blank">财税AI</nuxt-link>
                    </el-menu-item>
                    <template v-for="item in menuList">
                        <template v-if="item.list.length == 0">
                            <el-menu-item :key="item.index" :index="item.index" class="hot-class">
                                <nuxt-link v-if="item.name !== '风险检测'" :to="item.path"
                                    :target="item.target ? item.target : ''">
                                    {{ item.name }}
                                </nuxt-link>
                                <span v-else @click="LookAlert">
                                    {{ item.name }}
                                </span>
                            </el-menu-item>
                        </template>
                        <template v-else>
                            <el-menu-item :key="item.index" :index="item.index" class="hot-class menu-hover-show">
                                <nuxt-link class="hot-class-span" :style="{
                                    color: 'inherit',
                                }" :to="item.path" @click="menuItemClick(item)">
                                    {{ item.name }}
                                    <i class="el-icon-arrow-down"></i>
                                </nuxt-link>
                                <div class="menu-hover-box">
                                    <div class="menu-hover-box-content">
                                        <div v-for="itx in item.list" :key="itx.index" :index="itx.index"
                                            v-show="!itx.noShow" class="menu-hover-box-link">
                                            <nuxt-link class="a1" :to="{
                                                name: itx.path,
                                                params: itx.params,
                                                query: itx.query,
                                            }" @click="menuItemClick(item)">
                                                {{ itx.name }}
                                            </nuxt-link>
                                            <template v-if="itx.msg">
                                                {{ itx.msg }}
                                            </template>
                                            <template v-else>
                                                <nuxt-link v-for="mi in itx.miniList" :key="mi.name" :to="mi.link"
                                                    class="a2" :class="{
                                                        'a2-s':
                                                            $route.path == mi.link,
                                                    }" @click="menuItemClick(item)">{{ mi.name }}</nuxt-link>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </el-menu-item>
                            <!-- <el-submenu
                            :key="item.index"
                            :index="item.index"
                            class="hot-class"
                        >
                            <template slot="title">
                                <nuxt-link
                                    class="hot-class-span"
                                    :style="{
                                        color: 'inherit',
                                    }"
                                    :to="item.path"
                                    @click="menuItemClick(item)"
                                >
                                    {{ item.name }}
                                </nuxt-link>
                            </template>
                            <el-menu-item
                                v-for="itx in item.list"
                                :key="itx.index"
                                :index="itx.index"
                                v-show="!itx.noShow"
                            >
                                <nuxt-link
                                    :to="{
                                        name: itx.path,
                                        params: itx.params,
                                        query: itx.query,
                                    }"
                                    :style="{
                                        color:
                                            menuIndex == itx.index
                                                ? 'rgb(28, 135, 243)'
                                                : '',
                                    }"
                                >
                                    {{ itx.name }}
                                </nuxt-link>
                            </el-menu-item>
                        </el-submenu> -->
                        </template>
                    </template>
                    <el-menu-item index="10" class="hot-class">
                        <el-popover placement="bottom" width="331" :offset="0" trigger="hover"
                            popper-class="myMenu-vip-popper-class">
                            <div class="myMenu-vip-popper-main">
                                <div class="myMenu-vip-popper-title">
                                    <img src="~/assets/images/index/myMenu-vip-popper-title-icon.png" alt="vip" />
                                    <span>小竹财税全站通会员权益</span>
                                </div>
                                <div class="myMenu-popper-no-login-icon">
                                    <div class="no-login-icon-item">
                                        <img src="~/assets/images/index/no-login-icon-1.png" alt="财税垂直AI" />六大核心权益
                                    </div>
                                    <div class="no-login-icon-item">
                                        <img src="~/assets/images/index/no-login-icon-2.png" alt="100+专家政策解读" />17项细分权益
                                    </div>
                                    <div class="no-login-icon-item">
                                        <img src="~/assets/images/index/no-login-icon-3.png" alt="70+专业提升课" />各类财税工具
                                    </div>
                                    <div class="no-login-icon-item">
                                        <img src="~/assets/images/index/no-login-icon-4.png" alt="1000＋服务商" />被忽略的职场课
                                    </div>
                                </div>
                                <div v-if="!userInfo || userInfo.is_gpt_vip == 0" class="myMenu-vip-popper-button1"
                                    @click="vipClick2">
                                    开通会员
                                </div>
                                <div v-else class="myMenu-vip-popper-button2">
                                    <div @click="vipClick">续费会员</div>
                                    <span>会员到期时间：{{
                                        userInfo.gpt_vip_end_time_text
                                    }}</span>
                                </div>
                            </div>
                            <nuxt-link slot="reference" to="/vipcenter" class="index-menu-vip-center">
                                <img src="~/assets/images/index/vip-icon.png" alt="VIP"
                                    class="index-menu-vip-center-icon" />
                                <!-- <div
                                v-if="userInfo && userInfo.is_gpt_vip == 0"
                                class="index-menu-vip-center-tip"
                            >
                                <i class="el-icon-caret-top"></i>
                                低至0.46元/天
                            </div> -->
                                会员中心
                            </nuxt-link>
                        </el-popover>
                    </el-menu-item>
                </el-menu>
                <el-popover placement="bottom" width="331" :offset="0" trigger="hover"
                    popper-class="myMenu-new-popper-class">
                    <!-- <div
                    slot="reference"
                    v-show="userInfo == null"
                    class="login-register"
                    @click="showLoginTabs"
                >
                    登录 / 注册
                </div> -->
                    <img slot="reference" v-show="userInfo == null"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/no_user_avatar.png" alt="立即登陆"
                        class="login-register-avatar" @click="showLoginTabs" />
                    <div class="myMenu-new-popper-main">
                        <div class="user-no-login" @click="showLoginTabs">
                            <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/no_user_avatar.png"
                                alt="立即登陆" />
                            <div class="user-no-login-text">
                                <div>立即登录 ></div>
                                登录后你可以免费查阅法规
                            </div>
                        </div>
                        <div class="box-no-login">
                            <!-- <div class="vip-no-login">
                            <img
                                src="~/assets/images/index/vip-icon.png"
                                alt="vip"
                            />
                            <div class="vip-no-login-text">
                                <div>低至0.46元/天</div>
                                开通一年会员送66天会员
                            </div>
                            <div
                                class="vip-no-login-button"
                                @click="go('/vipcenter')"
                            >
                                立即开通
                            </div>
                        </div> -->
                            <div class="myMenu-popper-no-login-icon">
                                <div class="no-login-icon-item">
                                    <img src="~/assets/images/index/no-login-icon-1.png" alt="财税垂直AI" />六大核心权益
                                </div>
                                <div class="no-login-icon-item">
                                    <img src="~/assets/images/index/no-login-icon-2.png" alt="100+专家政策解读" />17项细分权益
                                </div>
                                <div class="no-login-icon-item">
                                    <img src="~/assets/images/index/no-login-icon-3.png" alt="70+专业提升课" />各类财税工具
                                </div>
                                <div class="no-login-icon-item">
                                    <img src="~/assets/images/index/no-login-icon-4.png" alt="1000＋服务商" />被忽略的职场课
                                </div>
                            </div>
                        </div>
                    </div>
                </el-popover>
                <bilibiliUserPopover v-if="userInfo"></bilibiliUserPopover>
            </template>
            <template v-else>
                <nuxt-link v-if="$route.name == 'service'" class="servicelogotext" to="/">
                    <i class="el-icon-arrow-left"></i>
                    <img class="left-log" src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs_logo.png"
                        alt="" />
                    小竹企服
                </nuxt-link>
                <nuxt-link v-else class="service_log" to="/service">
                    <img src="~/assets/images/service_log.png" style="width: auto;height: 23px;" alt="小竹财税">
                </nuxt-link>

                <el-menu :default-active="service_menu_i" background-color="transparent" class="el-menu-demo"
                    active-text-color="#1C87F3" text-color="#333333" mode="horizontal">
                    <el-menu-item index="1">
                        <nuxt-link to="/service"> 首页 </nuxt-link>
                    </el-menu-item>
                    <el-menu-item index="2" class="hot-class">
                        <nuxt-link to="/service/demandlist">需求大厅</nuxt-link>
                    </el-menu-item>
                    <el-menu-item index="3" class="hot-class">
                        <nuxt-link to="/service/servicelist">优质服务商</nuxt-link>
                    </el-menu-item>
                    <el-menu-item index="4" class="hot-class">
                        <nuxt-link to="/service/servicesearch?keyword=">优质服务</nuxt-link>
                    </el-menu-item>
                    <el-menu-item v-if="userInfo && !userInfo.service_info" index="5" class="hot-class">
                        <nuxt-link to="/service/applyservice">入驻服务商</nuxt-link>
                    </el-menu-item>
                    <el-menu-item index="6" class="hot-class">
                        <nuxt-link to="/user/myserviceorder">企服中心</nuxt-link>
                    </el-menu-item>
                    <el-menu-item v-if="userInfo && userInfo.service_info" index="7" class="hot-class">
                        <nuxt-link to="/service/servicecenter/index">管理店铺</nuxt-link>
                    </el-menu-item>
                </el-menu>
            </template>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

import { logout } from "@/assets/api/indexApi.js";
import bilibiliUserPopover from "@/components/index/bilibiliUserPopover.vue";

function getMunuListIndex(e) {
    if (e == null) return 0;
    let menuIndex = parseInt(e);
    if (menuIndex >= 10) {
        return Math.trunc(menuIndex / 10) - 1;
    } else {
        return menuIndex - 1;
    }
}

export default {
    name: "myMenu",
    components: {
        bilibiliUserPopover,
    },
    props: {
        showButton: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            keyword: "",
            menuSearchIndex: "1",
            userPopoverShow: false,
            PopoverTime: null,
        };
    },
    computed: {
        ...mapState("common", {
            menuIndex: (state) => state.menuIndex,
            menuList: (state) => state.menuList,
            indexHotSearch: (state) => state.indexHotSearch,
            userInfo: (state) => state.userInfo,
            goeasyObj: (state) => state.goeasyObj,
            payVipIndex: (state) => state.payVipIndex,

            logo_color: (state) => state.logo_color,
            nav_color: (state) => state.nav_color,
            back_color: (state) => state.back_color,
        }),
        getVipType: function () {
            if (!this.userInfo) return;
            if (this.userInfo.is_99vip == 1) return "永久会员";
            else if (this.userInfo.is_gpt_vip == 0)
                return "您当前未开通任何会员";
            else {
                return `${this.userInfo.gpt_vip_end_time_text} 到期`;
            }
        },
        ifMenuHight: function () {
            return (
                !this.showButton &&
                (this.$route.path == "/" || this.$route.path == "/vipcenter")
            );
        },

        service_menu_i: function () {
            if (this.$route.name == 'service-demandlist') return '2'
            else if (this.$route.name == 'service-servicelist') return '3'
            else if (this.$route.name == 'service-servicesearch') return '4'
            else if (this.$route.name == 'service-applyservice' || this.$route.name == 'service-applypersonservice') return '5'
            else if (this.$route.path == '/user/myserviceorder' || this.$route.path == ('/user/mydemand') || this.$route.path == ('/user/mydemandorder')) return '6'
            else if (this.$route.path == '/service/productrelease' || this.$route.path.includes('/service/servicecenter')) return '7'
            return '1'
        }
    },
    watch: {
        menuIndex(n, o) {
            this.getMenuSearchIndex(n);
        },
    },
    created() { },
    mounted() { },
    methods: {
        ...mapMutations("common", [
            "setmenuIndex",
            "set_payVipShow",
            "setuserInfo",
            "set_payVipIndex",
        ]),

        // 鼠标移入0.8s后头像
        mouseEnterEvent() {
            if (this.PopoverTime) clearInterval(this.PopoverTime);

            this.PopoverTime = setInterval(() => {
                this.userPopoverShow = true;
                if (this.PopoverTime) clearInterval(this.PopoverTime);
                this.PopoverTime = null;
            }, 300);
        },

        // 鼠标移出头像
        mouseLeaveEvent() {
            if (this.PopoverTime) clearInterval(this.PopoverTime);
            this.PopoverTime = null;
            this.userPopoverShow = false;
        },

        menuItemClick(item) {
            console.log(item.index)
            this.setmenuIndex(item.index);
            // this.$router.push({
            //     path: item.path,
            // });
        },

        handleSelect(e) {
            console.log(e);
            return;
            this.setmenuIndex(e);

            this.getMenuSearchIndex(e);

            return;
            if (e == "0") {
                this.$router.push({ path: "/" });
            } else if (e.length > 1) {
                let item = this.menuList[getMunuListIndex(this.menuIndex)].list;
                let i = parseInt(this.menuIndex[1]);
                if (item[i].path != this.$route.fullPath) {
                    this.$router.push({
                        name: item[i].path,
                        params: item[i].params,
                        query: item[i].query,
                    });
                }
            } else if (
                this.menuList[getMunuListIndex(this.menuIndex)].path &&
                this.$route.fullPath !=
                this.menuList[getMunuListIndex(this.menuIndex)].path
            ) {
                this.$router.push({
                    path: this.menuList[getMunuListIndex(this.menuIndex)].path,
                });
            }
        },

        getMenuSearchIndex(e) {
            if (e == "0" || e == null) return;
            if (e.length > 2 && e[0] == "4") return;
            else this.menuSearchIndex = e;
        },

        goSearch() {
            if (!this.userInfo) {
                this.$router.push({
                    path: "/login",
                    query: {
                        url: window.location.pathname + window.location.search,
                    },
                });
                return;
            }
            // if (!this.keyword && !this.indexHotSearch[this.menuIndex[0]]) {
            //     this.$message({
            //         message: "请输入搜索关键字",
            //         type: "warning",
            //     });
            //     return;
            // }
            this.keyword = this.keyword.trim();
            let keyword = "";
            if (!this.keyword) {
                keyword = this.indexHotSearch[this.menuIndex[0]];
            } else {
                keyword = this.keyword;
            }
            let path = "issue";
            if (this.menuIndex)
                switch (this.menuIndex[0]) {
                    case "1":
                        path = "issue";
                        break;
                    case "2":
                        path = "xiaozhuwenda";
                        break;
                    case "3":
                        path = "policy";
                        break;
                    case "4":
                        path = "norm";
                        break;
                    case "5":
                        path = "xueyuan";
                        break;
                    case "6":
                        path = "newdrygoods";
                        break;
                    case "7":
                        path = "information";
                        break;
                    default:
                        path = "issue";
                }
            // window.location.href = `http://zhusou.xzcs2022.com/search/${path}?q=${this.keyword}`

            keyword = keyword.replace(/%/g, "%25");
            keyword = keyword.replace(/\+/g, "%2B");
            keyword = keyword.replace(/</g, "%253C");
            keyword = keyword.replace(/>/g, "%253E");
            console.log(keyword);
            let url = `https://api.xiaozhucaishui.com/search/${path}?q=${keyword}`;
            if (this.userInfo) url += `&deviceid=${this.userInfo.id}`;
            window.open(url);
            // this.$router.push({
            //     path: "/SearchIndex",
            //     query: { keyword: this.keyword },
            // });
        },

        goIndex() {
            this.$router.push({
                path: "/",
            });
        },

        go(url) {
            this.$router.push({
                path: url,
            });
        },

        //
        logoutconfirm() {
            this.$confirm("是否退出登录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.logout();
            });
        },

        // 退出登录
        async logout() {
            const id = this.userInfo.id;
            const res = await logout({});
            this.$message("已退出登录");
            this.setuserInfo(null);
            // localStorage.removeItem("token");
            // localStorage.removeItem("userInfo");
            // localStorage.removeItem("closeServiceOne");
            // localStorage.removeItem("is_show_userdiscountcoupons");
            localStorage.clear();
            this.$router.push({ path: "/" });
            if (this.goeasyObj)
                this.goeasyObj.pubsub.unsubscribe({
                    channel: id,
                    onSuccess: function () { },
                    onFailed: function (error) { },
                });
        },

        // 修改登录弹窗状态
        showLoginTabs() {
            this.$router.push({
                path: "/login",
                query: {
                    url: window.location.pathname + window.location.search,
                    click: "1",
                },
            });
        },

        xzyClick() {
            this.set_payVipShow({ show: true, index: 2 });
        },
        vipClick() {
            this.set_payVipShow({ show: true, index: 1 });
        },
        vipClick2() {
            this.$router.push({
                path: "/vipcenter",
            });
        },

        LookAlert() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url: "/riskdetection",
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            // if (this.userInfo.is_gpt_vip == 0) {
            //     this.$confirm("该功能仅限会员用户使用", "提示", {
            //         confirmButtonText: "成为会员",
            //         cancelButtonText: "再看看",
            //     })
            //         .then(() => {
            //             this.set_payVipShow(true);
            //         })
            //         .catch(() => {});
            //     return;
            // }
            this.$router.push({
                path: "/riskdetection",
            });
            return;
            this.$alert("财税风险检测敬请期待", "提示", {
                confirmButtonText: "确定",
            });
        },
    },
};
</script>
<style lang="scss" scoped></style>
<style lang="scss">
@keyframes avatarFadeSmall {
    0% {
        transform: scale(2) translate(-13px, 22px);
    }

    60% {
        // opacity: 1;
    }

    100% {
        // opacity: 0;
        transform: scale(1) translateY(0) translate(0);
    }
}

@keyframes avatarFadeLarge {
    0% {
        transform: scale(1) translateY(0) translate(0);
    }

    60% {
        // opacity: 1;
    }

    100% {
        // opacity: 0;
        transform: scale(2) translate(-13px, 22px);
    }
}

@media (max-width: 5550px) {
    .xiaozhucaishui-menu {

        // height: 50px !important;
        .con {
            // height: 50px !important;
            // width: 1200px !important;
        }

        .el-menu--horizontal>.el-menu-item {
            // font-size: 15px !important;
            // height: 40px !important;
            // line-height: 40px !important;
            // padding: 0 11px !important;
        }

        .el-submenu__title {
            // font-size: 15px !important;
            // height: 40px !important;
            // line-height: 40px !important;
            // padding: 0 11px !important;
        }

        .log {
            // position: absolute;
            // left: -70px;
            margin-right: 26px;
            position: static;
            left: 0;
        }

        .box-avatar {
            position: relative;
            // left: 70px;
        }

        .login-register-avatar {
            // position: relative;
            // left: 70px;
            position: static;
            left: 0;
        }

        .bilibili-user-con {
            top: 80px !important;
            right: calc(50% - 660px) !important;
        }
    }
}

@media (max-width: 1350px) {
    .xiaozhucaishui-menu {

        // height: 50px !important;
        .con {
            // height: 50px !important;
            // width: 1200px !important;
        }

        .el-menu--horizontal>.el-menu-item {
            // font-size: 15px !important;
            // height: 40px !important;
            // line-height: 40px !important;
            // padding: 0 11px !important;
        }

        .el-submenu__title {
            // font-size: 15px !important;
            // height: 40px !important;
            // line-height: 40px !important;
            // padding: 0 11px !important;
        }

        .log {
            margin-right: 20px;
            position: static;
            left: 0;
        }

        .box-avatar {
            position: static;
            left: 0;
        }

        .login-register-avatar {
            position: static;
            left: 0;
        }

        .bilibili-user-con {
            top: 80px !important;
            right: calc(50% - 600px) !important;
        }
    }
}

.myMenu-new-popper-class {
    padding: 0;
    border-radius: 10px;

    .popper__arrow {
        display: none;
    }
}

.myMenu-new-popper-main {
    width: 331px;
    height: 180px;
    background-image: url(~/assets/images/index/myMenu-new-popper-main-bj.png);
    background-size: 331px 69px;
    background-repeat: no-repeat;
    padding: 26px 10px 16px;

    .user-no-login {
        padding: 0 13px;
        display: flex;
        align-items: center;
        cursor: pointer;

        img {
            width: 50px;
            height: 50px;
            border-radius: 50px;
        }

        .user-no-login-text {
            padding-left: 13px;
            font-weight: 350;
            font-size: 12px;
            color: #333333;

            div {
                font-weight: 600;
                font-size: 16px;
                padding-bottom: 4px;
            }
        }
    }

    .box-no-login {
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        padding: 10px 13px 6px;
        margin-top: 6px;
    }

    .vip-no-login {
        display: flex;
        align-items: center;

        img {
            width: 22px;
            height: 22px;
            min-width: 22px;
        }

        .vip-no-login-text {
            width: 100%;
            font-weight: 350;
            font-size: 12px;
            color: #666666;
            padding-left: 11px;

            div {
                font-weight: 400;
                font-size: 14px;
                color: #ff1111;
                margin-bottom: 5px;
            }
        }

        .vip-no-login-button {
            width: 84px;
            min-width: 84px;
            height: 31px;
            line-height: 31px;
            text-align: center;
            background: linear-gradient(90deg, #38b9fb 0%, #2672f3 100%);
            border-radius: 5px;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            cursor: pointer;
            user-select: none;

            &:hover {
                opacity: 0.8;
            }
        }
    }

    .myMenu-popper-no-login-icon {
        margin-top: 18px;

        .no-login-icon-item {
            margin-bottom: 9px;
            font-weight: 350;
            font-size: 12px;
            color: #666666;

            img {
                margin-right: 15px;
            }
        }
    }
}

.myMenu-popper-no-login-icon {
    display: flex;
    flex-wrap: wrap;

    .no-login-icon-item {
        width: 50%;
        display: flex;
        align-items: center;

        img {
            width: 15px;
            height: 15px;
            display: block;
        }
    }
}

.myMenu-vip-popper-class {
    width: 331px;
    height: 224px;
    background-image: url(~/assets/images/index/myMenu-vip-popper-class-bj.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10px 32px 22px;

    .popper__arrow {
        display: none;
    }
}

.myMenu-vip-popper-main {
    .myMenu-vip-popper-title {
        font-weight: 500;
        font-size: 16px;
        color: #773a0f;
        text-align: center;
        border-bottom: 1px solid rgba(87, 42, 10, 0.2);
        padding-bottom: 3px;

        img {
            width: 49px;
            height: 39px;
        }

        span {
            position: relative;
            bottom: 7px;
            left: -5px;
        }
    }

    .myMenu-popper-no-login-icon {
        margin-top: 23px;

        .no-login-icon-item {
            margin-bottom: 17px;
            font-weight: 350;
            font-size: 14px;
            color: #773a0f;
            text-wrap: nowrap;
        }

        img {
            margin-right: 6px;
        }
    }

    .myMenu-vip-popper-button1 {
        width: 224px;
        height: 34px;
        line-height: 34px;
        background: linear-gradient(90deg, #d3a557 0%, #f0cc8b 92%);
        border-radius: 5px;
        text-align: center;
        font-weight: 500;
        font-size: 16px;
        color: #773a0f;
        user-select: none;
        cursor: pointer;
        margin: 8px auto 0;

        &:hover {
            opacity: 0.8;
        }

        &:active {
            opacity: 0.9;
        }
    }

    .myMenu-vip-popper-button2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;

        div {
            width: 104px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            background: linear-gradient(90deg, #d3a557 0%, #f0cc8b 92%);
            border-radius: 5px;
            font-weight: 500;
            font-size: 16px;
            color: #773a0f;
            user-select: none;
            cursor: pointer;

            &:hover {
                opacity: 0.8;
            }

            &:active {
                opacity: 0.9;
            }
        }

        span {
            font-weight: 400;
            font-size: 12px;
            color: rgba(119, 58, 15, 0.8);
        }
    }
}

.xiaozhucaishui-menu {
    color: #fff;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    backdrop-filter: saturate(140%) blur(20px);
    background: hsla(0, 0%, 100%, 0.9);
    // background-color: rgba($color: #ffffff, $alpha: 0.9);
    height: 80px;
    border-bottom: 1px solid #f3f3f3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    .bilibili-user-con {
        top: 80px;
        right: calc(50% - 725px);
    }

    .con-index {
        backdrop-filter: saturate(140%) blur(20px);
        background: hsla(0, 0%, 100%, 0.3);
    }

    .con {
        height: 80px;
        width: 1200px;
        margin: 0 auto;
        // width: 100%;
        // padding: 0 calc(50% - 600px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    .log {
        width: auto;
        height: 40px;
    }

    .service_log {
        img {
            height: 23px;
            width: 240px;
        }

        margin-right: 69px;
    }

    .servicelogotext {
        .left-log {
            width: 1.875rem;
            height: 1.875rem;
            padding-right: 0.5rem;
        }

        i {
            font-weight: 700;
            font-size: 1.45rem;
            color: #2c2c2c;
            padding-right: 0.75rem;
        }

        min-width: 309px;
        // margin-right: 156px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        font-size: 1.25rem;
        font-weight: 700;
        color: #1c87f3;
        cursor: pointer;
    }

    .logtext {
        font-weight: 700;
        font-size: 16px;
        color: #333333;
        white-space: nowrap;
        cursor: pointer;

        span {
            font-weight: 400;
            font-size: 13px;
        }
    }

    .hot-class {
        position: relative;

        .hot {
            position: absolute;
            top: 12px;
            right: 8px;
            width: 14px;
            height: 16px;
        }

        .hot32 {
            right: 32px !important;
        }
    }

    .el-menu {
        width: 100%;
    }

    .el-menu.el-menu--horizontal {
        border-bottom-width: 0;
    }

    .el-menu--horizontal>.el-menu-item {
        border-bottom-width: 0 !important;
        font-size: 16px;
        height: 80px;
        // line-height: 80px;
        display: flex;
        align-items: center;
        padding: 0 10px;

        &:first-child {
            padding-left: 0;
        }

        &:hover {
            color: rgba($color: #1c87f3, $alpha: 0.7) !important;
            background-color: transparent !important;

            a {
                color: #1c87f3 !important;
            }
        }

        &:hover a {
            color: #1c87f3 !important;
        }
    }

    .el-submenu__title {
        border-bottom-width: 0 !important;
        font-size: 16px;
        height: 80px;
        line-height: 80px;
        padding: 0 10px;

        &:hover {
            opacity: 0.7;
            background-color: transparent !important;

            a {
                color: #1c87f3 !important;
            }
        }
    }

    // .el-submenu__title {
    //     border-bottom-width: 0 !important;
    //     font-size: 16px;
    //     height: 80px !important;
    //     line-height: 80px !important;

    //     &:hover {
    //         color: #1c87f3 !important;
    //         opacity: 0.7;
    //         background-color: transparent !important;
    //     }
    // }

    .menu-hover-show {
        &:hover {
            .menu-hover-box {
                display: block !important;
            }
        }
    }

    .menu-hover-box {
        display: none;
        // display: block;
        width: 100%;
        height: auto;
        background-color: rgba($color: #f9fafc, $alpha: 1);
        // background-color: #fff;
        position: fixed;
        z-index: 999;
        left: 0;
        top: 80px;

        .menu-hover-box-content {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            cursor: default !important;

            * {
                line-height: 1.5;
            }

            .menu-hover-box-link {
                padding-top: 14px;
                padding-bottom: 13px;
                font-weight: 400;
                font-size: 14px;
                color: #7d7d93;
                border-bottom: 1px solid #e0e4e8;

                &:hover {
                    color: #1484FF;
                }

                .a1 {
                    font-weight: 400;
                    font-size: 18px;
                    color: #1484ff;
                    display: block;
                    padding-bottom: 6px;
                    cursor: pointer !important;
                }

                .a2 {
                    font-weight: 400;
                    font-size: 14px;
                    color: #7d7d93 !important;
                    padding-right: 30px;
                    cursor: pointer !important;

                    &:hover {
                        color: #1484FF !important;
                    }
                }

                .a2-s {
                    color: #1c87f3 !important;
                }
            }
        }
    }

    .el-input__inner {
        background-color: transparent;
        border-width: 0;
        padding: 0 6px;
        color: #9e9e9e;
    }

    .hot-class-span {
        position: relative;
        top: 0;
        display: flex;
        align-items: center;
        .el-icon-arrow-down{
            margin: 0;
        }
    }

    .el-menu--horizontal>.el-submenu .el-submenu__icon-arrow {
        margin-top: 3px;
    }

    .el-menu--popup {
        min-width: 100px !important;
        text-align: center;
        background-color: hsla(0, 0%, 100%, 0.95) !important;

        .el-menu-item {
            &:hover {
                // opacity: 0.7;
                background-color: transparent !important;

                a {
                    color: #1c87f3 !important;
                }
            }

            &:hover a {
                color: #1c87f3 !important;
            }
        }
    }

    .login-register {
        height: 34px;
        line-height: 34px;
        padding: 0 10px;
        top: 3px;
        background: linear-gradient(90deg, #38b9fb 0%, #2672f3 100%);
        border-radius: 5px;
        white-space: nowrap;
        position: relative;
        cursor: pointer;
        user-select: none;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
    }

    .login-register-avatar {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 100%;
        border: 1px solid #2d2a2b;
    }

    .xiaozhucaishui-nav-news-list {
        .new-item {
            font-size: 14px;
            color: #666666;
            line-height: 40px;
            padding: 0 10px;
            cursor: pointer;
            position: relative;
            display: block;
            box-sizing: border-box;

            &:hover {
                color: #1c87f3;
            }

            .new-item-badge {
                position: absolute;
                background: #fa5151;
                font-size: 12px;
                font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
                font-weight: 500;
                color: #ffffff;
                height: 18px;
                line-height: 17px;
                border-radius: 18px;
                text-align: center;
                padding: 0 6px;
                top: 10px;
                right: 12px;
            }
        }
    }

    .index-menu-vip-center {
        // display: flex;
        // align-items: center;
        position: relative;

        .index-menu-vip-center-icon {
            margin-right: 2px;
        }

        .index-menu-vip-center-tip {
            position: absolute;
            height: 16px;
            line-height: 16px;
            padding: 0 7px;
            background: #ff1111;
            border-radius: 16px;
            font-weight: 400;
            font-size: 10px;
            color: #ffffff;
            bottom: -24px;
            left: 23px;

            i {
                position: absolute;
                bottom: 9px;
                left: 4px;
                font-size: 19px;
                color: #ff1111;
            }
        }
    }
}
</style>
